<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人分类汇总报表</title>
  <style>
    body {
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      color: #fff;
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    h2 {
      text-align: center;
      font-size: 2.5rem;
      margin: 30px 0;
      text-shadow: 0 0 10px rgba(255,255,255,0.3);
      position: relative;
    }

    h2:after {
      content: "";
      display: block;
      width: 100px;
      height: 3px;
      background: linear-gradient(to right, #00d2ff, #3a7bd5);
      margin: 10px auto;
      border-radius: 3px;
    }

    .chart-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 50px 0;
    }

    .chart-box {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
      padding: 20px;
      margin: 20px;
      transition: all 0.3s ease;
    }

    .chart-box:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px 0 rgba(31, 38, 135, 0.5);
    }

    #barChartDiv {
      width: 100%;
      height: 500px;
      min-width: 300px;
    }

    #pieChartDiv {
      width: 100%;
      height: 500px;
      min-width: 300px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin: 40px 0;
    }

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      padding: 20px;
      text-align: center;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.2);
    }

    .stat-card:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 25px 0 rgba(31, 38, 135, 0.3);
    }

    .stat-value {
      font-size: 2.5rem;
      font-weight: bold;
      margin: 10px 0;
      background: linear-gradient(to right, #00d2ff, #3a7bd5);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .stat-label {
      font-size: 1rem;
      color: rgba(255,255,255,0.8);
    }

    @media (max-width: 768px) {
      .chart-container {
        flex-direction: column;
      }

      .chart-box {
        width: 90%;
        margin: 20px auto;
      }

      h2 {
        font-size: 1.8rem;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <h2>联系人分类汇总分析</h2>

  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-label">总分类数</div>
      <div class="stat-value" id="totalCategories">0</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">总联系人</div>
      <div class="stat-value" id="totalContacts">0</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">最多联系人分类</div>
      <div class="stat-value" id="maxCategory">-</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">平均每分类</div>
      <div class="stat-value" id="avgPerCategory">0</div>
    </div>
  </div>

  <div class="chart-container">
    <div class="chart-box">
      <div id="barChartDiv"></div>
    </div>
    <div class="chart-box">
      <div id="pieChartDiv"></div>
    </div>
  </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 获取后端传递的数据
  const categories = [];
  const dataCountByCategory = [[${dataCountByCategory}]];

  let totalContacts = 0;
  let maxCount = 0;
  let maxCategory = '';

  // 准备数据
  const barData = [];
  const pieData = [];

  for (let i = 0; i < dataCountByCategory.length; i++) {
      const item = dataCountByCategory[i];
      const key = Object.keys(item)[0];
      const name = item[Object.keys(item)[1]];
      const value = item[key];

      categories.push(name);
      barData.push(value);

      // 计算渐变色
      const colorPercent = i / dataCountByCategory.length;
      const color = getGradientColor(colorPercent);

      pieData.push({
          name: name,
          value: value,
          itemStyle: { color: color }
      });

      // 统计信息
      totalContacts += value;
      if (value > maxCount) {
          maxCount = value;
          maxCategory = name;
      }
  }

  // 更新统计卡片
  document.getElementById('totalCategories').textContent = categories.length;
  document.getElementById('totalContacts').textContent = totalContacts;
  document.getElementById('maxCategory').textContent = maxCategory;
  document.getElementById('avgPerCategory').textContent = Math.round(totalContacts / categories.length);

  // 渐变色生成函数
  function getGradientColor(percent) {
      const colors = [
          {r: 0, g: 210, b: 255},   // #00d2ff
          {r: 58, g: 123, b: 213},  // #3a7bd5
          {r: 178, g: 31, b: 31},   // #b21f1f
          {r: 253, g: 187, b: 45}   // #fdbb2d
      ];

      const segment = 1 / (colors.length - 1);
      const index = Math.min(Math.floor(percent / segment), colors.length - 2);
      const localPercent = (percent % segment) / segment;

      const r = Math.round(colors[index].r + (colors[index+1].r - colors[index].r) * localPercent);
      const g = Math.round(colors[index].g + (colors[index+1].g - colors[index].g) * localPercent);
      const b = Math.round(colors[index].b + (colors[index+1].b - colors[index].b) * localPercent);

      return `rgb(${r}, ${g}, ${b})`;
  }

  // 初始化图表
  const barChart = echarts.init(document.getElementById('barChartDiv'));
  const pieChart = echarts.init(document.getElementById('pieChartDiv'));

  // 柱状图配置
  const barOption = {
      title: {
          text: '联系人分类分布',
          left: 'center',
          textStyle: {
              color: '#fff',
              fontSize: 18
          }
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          },
          formatter: '{b}: {c} 联系人'
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: {
          type: 'category',
          data: categories,
          axisLabel: {
              rotate: 30,
              color: 'rgba(255,255,255,0.8)'
          },
          axisLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.3)'
              }
          }
      },
      yAxis: {
          type: 'value',
          axisLabel: {
              color: 'rgba(255,255,255,0.8)'
          },
          axisLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.3)'
              }
          },
          splitLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
              }
          }
      },
      series: [{
          name: '联系人数量',
          type: 'bar',
          data: barData.map((value, index) => ({
              value: value,
              itemStyle: {
                  color: getGradientColor(index / barData.length)
              }
          })),
          label: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: '{c}'
          },
          barWidth: '40%',
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(255,255,255,0.5)'
              }
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
              return idx * 100;
          }
      }]
  };

  // 饼图配置
  const pieOption = {
      title: {
          text: '联系人分类占比',
          left: 'center',
          textStyle: {
              color: '#fff',
              fontSize: 18
          }
      },
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: {
              color: 'rgba(255,255,255,0.8)'
          }
      },
      series: [
          {
              name: '联系人分类',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                  borderRadius: 10,
                  borderColor: 'rgba(0,0,0,0.2)',
                  borderWidth: 2
              },
              label: {
                  show: true,
                  formatter: '{b}: {d}%',
                  color: '#fff'
              },
              emphasis: {
                  label: {
                      show: true,
                      fontSize: '18',
                      fontWeight: 'bold'
                  },
                  scaleSize: 10
              },
              labelLine: {
                  show: true,
                  lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                  }
              },
              data: pieData,
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                  return idx * 100 + 500;
              }
          }
      ]
  };

  // 使用配置项
  barChart.setOption(barOption);
  pieChart.setOption(pieOption);

  // 响应式调整
  window.addEventListener('resize', function() {
      barChart.resize();
      pieChart.resize();
  });

  // 添加动画效果
  setTimeout(() => {
      const statValues = document.querySelectorAll('.stat-value');
      statValues.forEach((el, index) => {
          setTimeout(() => {
              el.style.transform = 'scale(1.1)';
              setTimeout(() => {
                  el.style.transform = 'scale(1)';
              }, 300);
          }, index * 200);
      });
  }, 1500);
  /*]]>*/
</script>
</body>
</html>